<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../js/plugins/angular/jquery-2.1.1.min.js" type="text/javascript"></script>

    <script src="../../../js/plugins/angular/angular.min.js" type="text/javascript"></script>
    <script src="../../../js/plugins/angular/angular-ui-router.min.js" type="text/javascript"></script>
</head>
<style>
    *{padding:0px;margin: 0px;}
    ul,oli,li{list-style: none}
    div[ui-view=top]{background: #dcdcdc;border-bottom: solid 3px #999}
    div[ui-view=left]{width: 200px;border: solid 1px red;float: left;}
    div[ui-view=right]{position: absolute;left: 200px;right: 0;border: solid 1px red;}
</style>

<body ng-app="hd">
    <div ui-view=""></div>
    <div ui-view="content"></div>
</body>

</html>
<script>
    var m = angular.module('hd',['ui.router']);

    m.config(['$stateProvider','$urlRouterProvider',function ($stateProvider,$urlRouterProvider) {
        $urlRouterProvider.otherwise('/my');

        $stateProvider
            .state('my',{
                url:"/my",
                views:{
                    '@':{
                        templateUrl:"view/my.html"
                    },
                    'content':{
                        template:"欢迎来到"
                    }
                }
            })
            .state('my.video',{//video是my的子视图
                url:"/video",
                views:{
                    'son@my':{// 父视图@子视图
                        templateUrl:"view/video.html"
                    },
//                    'content@':{
//                        template:""
//                    }
                }
            })




    }]);





















</script>